import { useState } from 'react';

import { Avatar, List, Button } from 'antd';

import useChange from '@/views/function/use-change.js';

import dataSource from '@/datasource.js';

function Comments(){

    const [version,setVersion] = useState(0);

    const list = useChange( ds => ds.getComments() );

    const process = comment =>{
        return (
            <List.Item>
                <List.Item.Meta
                    avatar={<Avatar src="https://joeschmoe.io/api/v1/random" />}
                    title={ comment.title }
                    description={ comment.desc }/>
            </List.Item>
        )
    }

    const add = () => {
        dataSource.addComment();
        setVersion( version + 1 );
    }

    return (
        <div className="comment-list">
            <List itemLayout="horizontal" 
                  dataSource={ list } 
                  renderItem={ process } />
            <Button type="primary" onClick={ add }>新增</Button>
        </div>
    )
}

export default Comments ;